<template>
  <div class="charts">
    <!--  autoresize:图表自适应 -->
    <v-chart :option="getOption()" autoresize></v-chart>
  </div>
</template>

<script setup lang="ts">
// echarts配置项
const getOption = () => {
  return {
    // X轴
    xAxis: {
      // x轴上均匀分布
      type: "category",
      //x轴两边不留白
      boundaryGap: false,
      // 隐藏x轴
        show: false,
    },
    yAxis: {
      // 隐藏y轴
        show: false,
    },
    series: {
      type: "line",
      data: props.data,
      // 平滑曲线
      smooth: true,
      // 拐点样式
      itemStyle: {
        // 透明度设为0
        opacity: 0,
      },
      // 区域填充
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "pink", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "hotpink", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    // 调整图形图标的布局
    grid:{
        left:0,
        top:0,
        right:0,
        bottom:5,
        show: true,
      //图标底层的颜色
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "yellow", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "skyblue", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
      //提示插件
      tooltip:{
        trigger:'axis',
        //限制展示区域，在容器内部
         confine:true
    }
  };
};

// 接收父组件传来的props
let props = defineProps(["data"]);
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
